@import models.Tables.GrnaRow
@(row: GrnaRow)
@config.main(row.file) {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("GRNA : " + row.file)

            <div class="main-body">

                <p>Note: Please save the page address to view the analysis results(https://modms.lzu.edu.cn/alfalfa/tools/grna/@{row.file}).</p>

                <table class="table">

                    <tbody>

                        <tr>
                            <th>Task ID</th>
                            <td>@row.file</td>
                        </tr>
                        <tr>
                            <th>Task Time</th>
                            <td id="time"></td>
                        </tr>
                        <tr>
                            <th>Task State</th>
                            <td id="state">
                            @{
                                row.state match {
                                    case 0 => <div>
                                    Running...
                                        <img src="/assets/images/timg.gif"/>
                                    </div>
                                    case 1 => <div style="color:Green">Success</div>
                                    case 2 => <div style="color:red">Failure</div>
                                }
                            }
                            </td>
                        </tr>

                    </tbody>

                </table>

                <div id="result" style="display: none">
                    <button class="btn my-btn" style="width: 50px;float: right;margin-bottom: 10px"
                    onclick="DownloadGrnaResult()"  id="download-grna">
                        <i class="fa fa-download"></i>
                    </button>
                    <table id="table" class="table table-hover" data-pagination="true" data-advanced-sortable="true"
                    data-page-list="[10]">
                        <thead>
                            <tr>
                                <th data-field="0" data-sortable="true" data-search-type="text">Gene</th>
                                <th data-field="1" data-sortable="true" data-search-type="text">Seq</th>
                                <th data-field="2" data-sortable="true" data-search-type="text">Start</th>
                                <th data-field="3" data-sortable="true" data-search-type="text">End</th>
                                <th data-field="4" data-sortable="true" data-search-type="text">Strand</th>
                                <th data-field="5" data-sortable="true" data-search-type="text">GC%</th>
                                <th data-field="6" data-sortable="true" data-search-type="text">Offtargs</th>
                            </tr>
                        </thead>
                    </table>

                    <iframe style="border: 1px solid rgb(80, 80, 80);" id="iframe" height="400" width="100%"  >
                    </iframe>

                </div>

            </div>
        </div>
    </div>

    <script>

let interval;

            $(function () {
                let date = new Date(parseInt("@row.time"))
                let time = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
                $("#time").text(time)


              interval = setInterval(updateResult(), 10000);
            })


                  function updateResult(){
                  $.post("@routes.ToolsController.getGrnaInfoByFile(row.file)", (state) => {
                    if (state === 1) {
                        $.post("@routes.ToolsController.getGrnaData(row.file)", (data) => {
                            $("#table").bootstrapTable({
                                data: data
                            })

                            let host = window.location.hostname;
                            $("#iframe").attr("src", "https://modms.lzu.edu.cn/jbrowse/?data=my_data/Alfalfa/GRNA/@{row.file}/data&tracks=GRNA,DNA&tracklist=0&nav=1&overview=0")

                            $("#state").html(` <div style="color:Green">Success</div>`)
                            $("#result").show()
                            clearInterval(interval)
                        })
                    }else if(state === 2){
                        $("#state").html(`<div style="color:red">Failure</div>`)
                    }
                })
                return updateResult
                }

                function DownloadGrnaResult() {
                    window.location.href="/alfalfa/download/downloadTmp?path=@{row.file}&file=sg_RNA.targs"
                }

    </script>
}